import React, {FC, useCallback} from 'react';
import "./index.less";
import HxJournalSection from "@/components/HxJournalSection";
import HxCyCard from "@/components/HxCyCard";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {FrontJournalSpecialColumn, queryFrontJournalSpecialColumns} from "@/services";
import HxScrollMenu from "@/components/HxScrollMenu";
import useBreakpoint from "antd/es/grid/hooks/useBreakpoint";

interface FeaturedColumnsProps {
}

const FeaturedColumns: FC<FeaturedColumnsProps> = (props) => {
  const screens = useBreakpoint();
  const isMobile = !(screens.lg || screens.xxl || screens.xl);

  const dataReq = useRequest(() => API.queryFrontJournalSpecialColumns({
    pageSize: 12
  }));

  const data = dataReq.data?.data || [];

  // 先将数组按每2个元素分组
  const groupedData = [];
  if (data && data.length) {
    for (let i = 0; i < data.length; i += 2) {
      // 每组包含当前元素和下一个元素（若存在）
      groupedData.push({
        first: data[i],
        second: data[i + 1] // 可能为undefined（当数组长度为奇数时）
      });
    }
  }

  const onSectionClick  = useCallback((item: API.FrontJournalSpecialColumn) => {
    //window.open(`/search-adv/article?specialColumnIds=${item.id}`, '_blank');
    window.open(`/search-adv/special-column/${item.id}/article`, '_blank');
  }, []);

  return (
    <HxCyCard title={"期刊特色栏目聚焦"} subtext={"Featured Columns"} className={"featured-columns-card"}>
      <HxScrollMenu donothing={isMobile}>
        {
          groupedData?.map((group, index) => {
            return (
              <div className={"featured-columns-section-group-wrap"} key={group.first.id}>
                <HxJournalSection key={index}
                                  title={group.first.name}
                                  className={"featured-columns-section"}
                                  onClick={() => onSectionClick(group.first)}
                >
                  {group.first.introduction}
                </HxJournalSection>
                {
                  group.second && (
                    <HxJournalSection key={index}
                                      title={group.second.name}
                                      className={"featured-columns-section"}
                                      onClick={() => onSectionClick(group.second)}
                    >
                      {group.second.introduction}
                    </HxJournalSection>
                  )
                }
              </div>
            )
          })
        }
      </HxScrollMenu>
    </HxCyCard>
  );
};

export default FeaturedColumns;
